Skip to content

Commit

Permalink
feat: add fixed height coachmark image variation
Browse files Browse the repository at this point in the history
  • Loading branch information
cdransf committed Dec 17, 2024
1 parent 63bbe7a commit fcc97e9
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 70 deletions.
4 changes: 4 additions & 0 deletions .changeset/nice-cows-shout.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,7 @@ This migrates the `coachmark` component to S2. Custom properties have been remap
| --spectrum-coach-mark-body-size | --spectrum-coach-mark-body-font-size |
| --spectrum-body-sans-serif-font-style | --spectrum-body-serif-font-style |
| --spectrum-coach-mark-pagination-body-size | --spectrum-coach-mark-pagination-body-font-size |

## Additions

Adds `--spectrum-coachmark-media-fixed-height` for fixed `4:3` image variant and an accompanying `--mod-coachmark-media-fixed-height` mod. This variation has been added to the `coachmark` component story as a boolean control labeled as `Image fixed height`. The class is conditionally added within the `hasImage` block and, as such, will only impact rendering when `hasImage` is also `true`.
6 changes: 6 additions & 0 deletions components/coachmark/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ governing permissions and limitations under the License.
--spectrum-coachmark-media-height: var(--spectrum-coach-mark-media-height);
--spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height);

--spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height);

--spectrum-coachmark-border-size: var(--mod-popover-border-width);
--spectrum-coachmark-border-radius: var(--mod-popover-corner-radius);

Expand Down Expand Up @@ -92,6 +94,10 @@ governing permissions and limitations under the License.
border-start-end-radius: inherit;
}

.spectrum-CoachMark-image-wrapper--fixedHeight {
block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height));
}

.spectrum-CoachMark-image {
display: block;
inline-size: 100%;
Expand Down
13 changes: 11 additions & 2 deletions components/coachmark/stories/coachmark.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,21 @@ export default {
},
control: "boolean",
},
imageIsFixedHeight: {
name: "Image fixed height",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "Component",
},
},
},
args: {
rootClass: "spectrum-CoachMark",
hasActionMenu: true,
hasPagination: true,
hasImage: false,
imageIsFixedHeight: false,
},
parameters: {
actions: {
Expand All @@ -56,8 +65,8 @@ export default {
},
docs: {
story: {
height: "300px"
}
height: "300px",
},
},
},
};
Expand Down
158 changes: 90 additions & 68 deletions components/coachmark/stories/template.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const Template = ({
hasActionMenu = false,
hasPagination,
hasImage,
imageIsFixedHeight,
isOpen = true,
...globals
}) => html`
Expand All @@ -40,74 +41,95 @@ export const Template = ({
isOpen: true,
content: [
html`
${hasImage ? html`
<div class="${rootClass}-image-wrapper">
<img class="${rootClass}-image" src="example-card-landscape.png" />
</div>` : ""}
<div class="spectrum-CoachMark-header">
<div class="spectrum-CoachMark-title">Try playing with a pixel brush</div>
<div class="spectrum-CoachMark-action-menu">
${hasActionMenu ? ActionMenu({
isOpen,
popoverPosition: "right",
popoverTestId: "popover-nested-2",
popoverId: "popover-nested-2",
popoverTriggerId: "trigger-nested-2",
customStyles: {
"margin-block-start": "30px",
"margin-inline-start": "-32px"
},
iconName: "More",
size: globals.scale === "large" ? "s" : "m",
items: [
{
label: "Skip tour",
},
{
label: "Reset tour",
}
],
}) : ""}
</div>
</div>
<div class="spectrum-CoachMark-content">
Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.
</div>
<div class="${rootClass}-footer">
${hasPagination ? html`<div class="spectrum-CoachMark-step"><bdo dir="ltr">2 of 8</bdo></div>` : ""}
${ButtonGroup({
customClasses: globals.scale === "large" ? [`${rootClass}-buttongroup--mobile`] : [`${rootClass}-buttongroup`],
size: globals.scale === "large" ? "s" : "m",
items: globals.scale === "large" ?
[
{
variant: "secondary",
treatment: "outline",
hideLabel: true,
iconName: "ChevronLeft75",
},
{
variant: "primary",
treatment: "outline",
label: "Next",
},
]
:
[
{
variant: "secondary",
treatment: "outline",
label: "Previous",
},
{
variant: "primary",
treatment: "outline",
label: "Next",
},
],
})}
</div>
`
${hasImage
? html` <div
class="${rootClass}-image-wrapper ${imageIsFixedHeight
? `${rootClass}-image-wrapper--fixedHeight`
: ""}"
>
<img
class="${rootClass}-image"
src="example-card-landscape.png"
/>
</div>`
: ""}
<div class="spectrum-CoachMark-header">
<div class="spectrum-CoachMark-title">
Try playing with a pixel brush
</div>
<div class="spectrum-CoachMark-action-menu">
${hasActionMenu
? ActionMenu({
isOpen,
popoverPosition: "right",
popoverTestId: "popover-nested-2",
popoverId: "popover-nested-2",
popoverTriggerId: "trigger-nested-2",
customStyles: {
"margin-block-start": "30px",
"margin-inline-start": "-32px",
},
iconName: "More",
size: globals.scale === "large" ? "s" : "m",
items: [
{
label: "Skip tour",
},
{
label: "Reset tour",
},
],
})
: ""}
</div>
</div>
<div class="spectrum-CoachMark-content">
Pixel brushes use pixels to create brush strokes, just like in other
design and drawing tools. Start drawing, and zoom in to see the
pixels in each stroke.
</div>
<div class="${rootClass}-footer">
${hasPagination
? html`<div class="spectrum-CoachMark-step">
<bdo dir="ltr">2 of 8</bdo>
</div>`
: ""}
${ButtonGroup({
customClasses:
globals.scale === "large"
? [`${rootClass}-buttongroup--mobile`]
: [`${rootClass}-buttongroup`],
size: globals.scale === "large" ? "s" : "m",
items:
globals.scale === "large"
? [
{
variant: "secondary",
treatment: "outline",
hideLabel: true,
iconName: "ChevronLeft75",
},
{
variant: "primary",
treatment: "outline",
label: "Next",
},
]
: [
{
variant: "secondary",
treatment: "outline",
label: "Previous",
},
{
variant: "primary",
treatment: "outline",
label: "Next",
},
],
})}
</div>
`,
],
})}
</div>
Expand Down

0 comments on commit fcc97e9

Please sign in to comment.