fix(action-group): add story (#1314)

* fix(action-group):add story * update story select
Vonage · Jun 15, 2022 · 3b16eaf · 3b16eaf
1 parent 1e9cb0e
commit 3b16eaf
Showing 1 changed file with 36 additions and 4 deletions.
diff --git a/components/action-group/stories/action-group.stories.js b/components/action-group/stories/action-group.stories.js
@@ -59,10 +59,22 @@ Separator.args = { layout: 'outlined' };
 const ActionGroupTightTemplate = args => html`
     <div style="display: flex; column-gap: 2px">
     <vwc-action-group ...=${spread(args)}>
-        <vwc-button icon="flag-uruguay">
-            <span>+1</span>
-            <span style="font-size: 14px; margin-left: 8px"><vwc-icon type="chevron-down-solid" inline></vwc-icon></span>
-        </vwc-button>
+        <vwc-action-group tight>
+            <vwc-select appearance="ghost" dense icon="flag-united-states" style="width: 130px;">
+                <vwc-list-item  mwc-list-item="" disabled selected graphic="icon">
+                    <vwc-icon slot="graphic" type="flag-united-states" size="small"></vwc-icon>
+                    +1
+                </vwc-list-item>
+                <vwc-list-item  graphic="icon">
+                    <vwc-icon slot="graphic" type="flag-uruguay" size="small"></vwc-icon>
+                    +2
+                </vwc-list-item>
+                <vwc-list-item  graphic="icon">
+                    <vwc-icon slot="graphic" type="flag-georgia" size="small"></vwc-icon>
+                    +3
+                </vwc-list-item>
+            </vwc-select>
+        </vwc-action-group>
         <span role="separator"></span>
         <vwc-textfield icon="search" dense placeholder="Search" appearance="ghost">
         </vwc-textfield>
@@ -73,5 +85,25 @@ const ActionGroupTightTemplate = args => html`
 export const tight = ActionGroupTightTemplate.bind({});
 tight.args = { layout: 'outlined', tight };
 
+const ActionGroupSplitTemplate = args => html`
+    <div style="display: flex; flex-direction: column; gap: 16px">
+    <vwc-action-group layout="outlined" shape="pill">
+        <vwc-button label="Action" shape="pill"></vwc-button>
+        <span role="separator"></span>
+        <vwc-icon-button icon="chevron-down-solid" shape="circled"></vwc-icon-button>
+    </vwc-action-group>
+    <vwc-action-group>
+        <vwc-button icon="microphone-2-solid" label="Mute" stacked>
+        </vwc-button>
+        <span role="separator" style="align-self: center; height: 40px;"></span>
+        <vwc-icon-button icon="chevron-down-solid"></vwc-icon-button>
+    </vwc-action-group>
+</div>`;
+
+export const SplitButton = ActionGroupSplitTemplate.bind({});
+SplitButton.args = {  };
+
+
+