From 9d20c4f31513ac7fcf3f8dc2f3dec91fd245e466 Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Fri, 28 Jun 2024 13:06:41 -0400 Subject: [PATCH 1/3] Update icon and button components to scale with parent container --- .../atoms/LegacyButton/LegacyButton.css | 17 +++++++++++ .../atoms/LegacyIcon/LegacyIcon.css | 28 +++++++++++++++++-- src/components/atoms/LegacyIcon/LegacyIcon.js | 22 +++++++-------- 3 files changed, 54 insertions(+), 13 deletions(-) diff --git a/src/components/atoms/LegacyButton/LegacyButton.css b/src/components/atoms/LegacyButton/LegacyButton.css index e69de29b..c00c8bf4 100644 --- a/src/components/atoms/LegacyButton/LegacyButton.css +++ b/src/components/atoms/LegacyButton/LegacyButton.css @@ -0,0 +1,17 @@ +:host { + display: block; + height: 100%; + width: 100%; +} + +:host *:not(style) { + display: block; + height: 100%; + width: 100%; +} + +a { + display: block; + height: 100%; + width: 100%; +} \ No newline at end of file diff --git a/src/components/atoms/LegacyIcon/LegacyIcon.css b/src/components/atoms/LegacyIcon/LegacyIcon.css index cf5cc2e5..3ba4be51 100644 --- a/src/components/atoms/LegacyIcon/LegacyIcon.css +++ b/src/components/atoms/LegacyIcon/LegacyIcon.css @@ -1,11 +1,23 @@ +:host { + display: block; + height: 100%; + width: 100%; +} + +:host *:not(style) { + display: block; + height: 100%; + width: 100%; +} + .icon-container { position: relative; } .ellipse-shadow { position: absolute; - bottom: 12px; - left: 12px; + bottom: 5%; + left: 5%; width: 100%; height: 100%; z-index: -1; @@ -25,7 +37,19 @@ align-items: center; } +.outline svg { + height: 100%; + width: 100%; +} + +.ellipse svg { + height: 100%; + width: 100%; +} + .icon svg { display: block; margin: auto; + width: 50%; + height: 50%; } diff --git a/src/components/atoms/LegacyIcon/LegacyIcon.js b/src/components/atoms/LegacyIcon/LegacyIcon.js index 44d7be7d..c61fd1b7 100644 --- a/src/components/atoms/LegacyIcon/LegacyIcon.js +++ b/src/components/atoms/LegacyIcon/LegacyIcon.js @@ -7,7 +7,7 @@ template.innerHTML = `
-
+
`; @@ -43,17 +43,17 @@ class LegacyIcon extends HTMLElement { const outlineColor = this.getAttribute('outline-color'); const outlineElement = this.shadowRoot.querySelector('.outline'); outlineElement.innerHTML = ` - - + `; const shadowElement = this.shadowRoot.querySelector('.ellipse-shadow'); shadowElement.innerHTML = ` - - + + `; @@ -77,32 +77,32 @@ class LegacyIcon extends HTMLElement { `; case 'housing': return ` - + `; case 'people': return ` - + `; case 'sustainability': return ` - + `; case 'safety': return ` - + `; case 'commerce': return ` - + From 748fe2d240a02833440b69b4228a424dfb3eda1a Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Fri, 28 Jun 2024 13:06:58 -0400 Subject: [PATCH 2/3] Update stories to provide sensible parent container sizes --- src/stories/legacybutton.stories.js | 92 ++++++++++++++++------------- src/stories/legacyicon.stories.js | 26 +++++--- 2 files changed, 69 insertions(+), 49 deletions(-) diff --git a/src/stories/legacybutton.stories.js b/src/stories/legacybutton.stories.js index e3763707..147d321b 100644 --- a/src/stories/legacybutton.stories.js +++ b/src/stories/legacybutton.stories.js @@ -36,7 +36,7 @@ export default { }, args: { icon: 'neighborhoods', - outlineColor: 'black', + outlineColor: '#18252A', label: '

Neighborhoods

', href: 'https://www.example.com', @@ -78,7 +78,11 @@ function _createLegacyButton(args) { // Template const Template = (args) => { - return _createLegacyButton(args); + return html` +
+ ${_createLegacyButton(args)} +
+ `; }; export const Primary = Template.bind({}); @@ -86,50 +90,56 @@ export const Primary = Template.bind({}); export const ButtonGrid = () => { return html`
-
- -

+
+ - Neighborhoods -

- +

+ Neighborhoods +

+ +
-
- -

+
+ - People -

- +

+ People +

+ +
-
- -

+
+ - Sustainability -

- +

+ Sustainability +

+ +
`; diff --git a/src/stories/legacyicon.stories.js b/src/stories/legacyicon.stories.js index 607d42d1..2d435ee7 100644 --- a/src/stories/legacyicon.stories.js +++ b/src/stories/legacyicon.stories.js @@ -23,7 +23,7 @@ export default { }, args: { icon: 'neighborhoods', - outlineColor: 'black', + outlineColor: '#18252A', }, }; @@ -36,7 +36,11 @@ function _createLegacyIcon(args) { // Template const Template = (args) => { - return _createLegacyIcon(args); + return html` +
+ ${_createLegacyIcon(args)} +
+ `; }; export const Primary = Template.bind({}); @@ -44,14 +48,20 @@ export const Primary = Template.bind({}); export const IconGrid = () => { return html`
-
- +
+
+ +
-
- +
+
+ +
-
- +
+
+ +
`; From 91cce20d6ce39ef47354703653836eec0ed8d3f4 Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Fri, 28 Jun 2024 13:17:39 -0400 Subject: [PATCH 3/3] Format --- .../atoms/LegacyButton/LegacyButton.css | 2 +- src/stories/legacybutton.stories.js | 18 ++++++++++-------- src/stories/legacyicon.stories.js | 18 ++++++++++-------- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/atoms/LegacyButton/LegacyButton.css b/src/components/atoms/LegacyButton/LegacyButton.css index c00c8bf4..600c1454 100644 --- a/src/components/atoms/LegacyButton/LegacyButton.css +++ b/src/components/atoms/LegacyButton/LegacyButton.css @@ -14,4 +14,4 @@ a { display: block; height: 100%; width: 100%; -} \ No newline at end of file +} diff --git a/src/stories/legacybutton.stories.js b/src/stories/legacybutton.stories.js index 147d321b..a39c21a9 100644 --- a/src/stories/legacybutton.stories.js +++ b/src/stories/legacybutton.stories.js @@ -78,11 +78,7 @@ function _createLegacyButton(args) { // Template const Template = (args) => { - return html` -
- ${_createLegacyButton(args)} -
- `; + return html`
${_createLegacyButton(args)}
`; }; export const Primary = Template.bind({}); @@ -90,7 +86,9 @@ export const Primary = Template.bind({}); export const ButtonGrid = () => { return html`
-
+
{
-
+
{
-
+
{ - return html` -
- ${_createLegacyIcon(args)} -
- `; + return html`
${_createLegacyIcon(args)}
`; }; export const Primary = Template.bind({}); @@ -48,17 +44,23 @@ export const Primary = Template.bind({}); export const IconGrid = () => { return html`
-
+
-
+
-
+