diff --git a/src/components/atoms/LegacyButton/LegacyButton.css b/src/components/atoms/LegacyButton/LegacyButton.css index e69de29b..600c1454 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%; +} 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 ` - + diff --git a/src/stories/legacybutton.stories.js b/src/stories/legacybutton.stories.js index e3763707..a39c21a9 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,7 @@ function _createLegacyButton(args) { // Template const Template = (args) => { - return _createLegacyButton(args); + return html`
${_createLegacyButton(args)}
`; }; export const Primary = Template.bind({}); @@ -86,50 +86,62 @@ 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..20c4eb2f 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,7 @@ function _createLegacyIcon(args) { // Template const Template = (args) => { - return _createLegacyIcon(args); + return html`
${_createLegacyIcon(args)}
`; }; export const Primary = Template.bind({}); @@ -44,14 +44,26 @@ export const Primary = Template.bind({}); export const IconGrid = () => { return html`
-
- +
+
+ +
-
- +
+
+ +
-
- +
+
+ +
`;